<template>
  <div style="background-color:#f5f5f5;">
    <div class="examineSuccess">
      <div style="width: 100%;background-color:#f5f5f5;">
        <div class="stepBox">
          <div class="titles">
            <p><span style="font-weight: bold;color: #333333;font-size: 20px;">刊登租房广告2</span>
              <span>(<span style="color: red">*</span>为必填项)</span>
            </p>
          </div>
          <!--步骤条-->
          <div class="steps">
            <el-steps :active="1" align-center finish-status="success" process-status="finish">
              <el-step title="填写资料" description=""></el-step>
              <el-step title="确认刊登方案" description=""></el-step>
              <el-step title="缴费" description=""></el-step>
              <el-step  title="完成刊登" description=""></el-step>
            </el-steps>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="successBox">
        <div class="programmeTitle">
          <h3 style="float: left">售盘长期付费方案</h3>
          <span style="float: left;margin-left: 100px"><el-radio v-model="radio" label="1">香港代理人</el-radio></span>
        </div>
          <div class="programmeTable">
            <el-table
              :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
              :data="tableData"
              style="width: 100%">
              <el-table-column
                label="方案"
                width="180">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">

                    <div slot="reference" class="name-wrapper">
                     <el-radio v-model="radio" label="1">基础年费计划</el-radio>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="date"
                label="启用时间"
                width="180">
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="放盘时间">
              </el-table-column>
              <el-table-column
                align="center"
                prop="price"
                label="售卖">
              </el-table-column>
              <el-table-column
                align="center"
                prop="price2"
                label="单卖">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="programmeFooter">
          <h3 style="float: left;">现付: <span style="color: red;">0元</span></h3>
          <router-link to="/payOnline"><el-button class="programmeFooterBtn">结算</el-button></router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "payProgramme",
      data() {
        return {
          tableData: [{
            date: '12个月内启用',
            name: '60日/个',
            price: '880元',
            price2: '100元'
          }, {
            date: '12个月内启用',
            name: '60日/个',
            price: '880元',
            price2: '100元'
          }, {
            date: '12个月内启用',
            name: '60日/个',
            price: '880元',
            price2: '100元'
          }, {
            date: '12个月内启用',
            name: '60日/个',
            price: '880元',
            price2: '100元'
          }]
        }
      }
    }
</script>

<style scoped>
  .examineSuccess{
    width: 100%;
    height: 100%;
    background-color:#f5f5f5;
    /*border: 1px solid #000;*/
  }
  .examineSuccess .stepBox{
    width: 1200px;
    /*background-color: #cccc;*/
    margin: 0 auto;
    height: 200px;
    background-color: #fff;
    border-top: 2px solid #ccc;

  }
  .examineSuccess .stepBox .titles{
    padding:30px 0 0 15px;
    /*border: 1px solid #000;*/
    text-align: left;
  }
  .steps{
    margin-top: 30px;
  }
  .examineSuccess .container{
    width: 100%;
    height: 500px;
    background-color: #f5f5f5;
    /*border: 1px solid #000;*/
  }
  .successBox{
    width: 1200px;
    height: 400px;
    background-color: #fff;
    margin: 30px auto;
    border: 1px solid #fff;
  }
  .programmeTitle{
    width: 98%;
    border-left: 5px solid #ad2022;
    /*border: 1px solid #000;*/
    border-radius: 5px 0 0 5px;
    height: 30px;
    margin:15px auto;
    text-align: left;
    padding-left: 15px;
    line-height: 30px;
  }
  .programmeTable{
    width: 90%;
    height: 300px;
    /*border: 1px solid #000;*/
    margin: 0 auto;
  }
  .programmeFooter{
    width: 1200px;
    height: 50px;
    /*border: 1px solid #000;*/
    margin: 0 auto;
    text-align: left;
    line-height: 50px;
  }
  .programmeFooterBtn{
    float: left;
    margin:5px 0 0 50px;
    width: 200px;
    color: #ffffff;
    background-color:#ad2022;
    font-weight: bold;
  }
</style>
